<template>
  <div>
    <!-- 第一行 下拉框和按钮 -->
    <div class="select">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="16">
            <el-form-item label="">
              <!-- clearable表单中的清空按钮 -->
              <el-select v-model="form.status" clearable placeholder="请选择状态">
                <el-option label="未审核" value="未审核" />
                <el-option label="审核通过" value="审核通过" />
                <el-option label="审核不通过" value="审核不通过" />
                <el-option label="推荐" value="推荐" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.categoryId" clearable placeholder="请选择分类">
                <el-option
                  v-for="item in categories"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="form.title" clearable placeholder="请输入标题" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right;">
            <el-form-item>
              <el-button type="primary" @click="$router.push('/admin/info/article/Publish')">发布文章</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 第二行 表格 -->
    <div class="table">
      <el-table :data="articleData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="60" />
        <el-table-column label="封面" width="180">
          <template slot-scope="scope">
            <img width="120px" height="60px" :src="scope.row.cover" alt="">
          </template>
        </el-table-column>
        <el-table-column label="风采" width="800">
          <template slot-scope="scope">
            <div>{{ scope.row.title }}</div>
            <div>{{ scope.row.baseUser ? scope.row.baseUser.realname : "佚名" }}</div>
            <div>{{ scope.row.category.name }}</div>
            <div>{{ scope.row.publishTime | fmtTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '审核通过'" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === '未审核'" type="info">未审核</el-tag>
            <el-tag v-else-if="scope.row.status === '推荐'" type="warning">推荐</el-tag>
            <el-tag v-else type="danger">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" type="warning" @click="toRecommend(scope.row.id, '推荐')">推荐</el-link>
            <!-- 文章状态为未审核时 可以点击审核按钮 此时disabled为false -->
            <el-link
              :disabled="scope.row.status !== '未审核'"
              :underline="false"
              type="success"
              style="margin-left: 20px;"
              @click="check(scope.row)"
            >审核</el-link><br>
            <el-link :underline="false" type="danger" @click="toDelete(scope.row.id)">删除</el-link>
            <el-link :underline="false" type="primary" style="margin-left: 20px;" @click="toEdit(scope.row)">修改</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 第三行 分页按钮 -->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 模态框 -->
    <el-dialog title="审核文章信息" :visible.sync="visible" width="70%">
      <!-- 文章标题 -->
      <div style="text-align: center;font-size: 20px;">{{ article.title }}</div>
      <!-- 文章内容 -->
      <div style="text-align: left;" v-html="article.content" />
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="changeStatus(article.id, '审核不通过')">审核不通过</el-button>
        <el-button type="primary" @click="changeStatus(article.id, '审核通过')">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      // 表单对象
      form: {},
      // 文章分类
      categories: [],
      // 所有文章
      articleData: [],
      params: {
        page: 1,
        pageSize: 5
      },
      // 文章数量
      total: 0,
      // 控制模态框显示与隐藏的变量
      visible: false,
      // 接收被点击文章信息
      article: {}
    }
  },
  watch: {
    form: {
      handler() {
        // 确保获取文章分类是最新的
        this.getCategory()
        this.params.page = 1
        // 只要条件发生改变就发起一个查询请求
        this.getArticle()
      },
      deep: true
    }
  },
  created() {
    this.getCategory()
    this.getArticle()
  },
  methods: {
    // 删除文章
    toDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 表示点击了确认按钮   (形参) =>{函数体} 箭头函数
        // es6对象简写语法  变量名和属性名一致可以简写为属性名 id：id  简写为id
        const res = await get('/article/deleteById', { id })
        // elementui提示
        this.$message({
          type: 'success',
          message: res.message
        })
        // 重新载入数据x`
        this.getArticle()
      }).catch(() => {
        // 点击取消按钮 取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改文章
    toEdit(row) {
      this.$router.push({
        path: '/admin/info/article/Publish',
        query: row
      })
    },
    // 对文章进行审核
    async changeStatus(id, status) {
      const res = await post('/article/changeStatus', { id, status })
      this.$notify({
        title: '审核',
        type: 'success',
        message: res.message
      })
      // 重新载入数据
      this.getArticle()
      this.visible = false
    },
    // 审核弹出模态框
    check(row) {
      // row--->当前被点击文章信息
      this.article = { ...row }
      this.visible = true
    },
    toRecommend(id, status) {
      this.$confirm('此操作将推荐该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 继续推荐 --->发起推荐请求
        const res = await post('/article/changeStatus', { id, status })
        this.$message({
          type: 'success',
          message: res.message
        })
        // 重新载入数据
        this.getArticle()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消推荐'
        })
      })
    },
    // 当前页码条数发生改变触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val
      this.params.page = 1
      this.getArticle()
    },
    // 当前页码发生改变触发的方法
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val
      this.getArticle()
    },
    // 分页多条件查询所有文章信息
    async getArticle() {
      // 分页 page pageSize 多条件 title status categoryId
      const temp = {
        ...this.params,
        ...this.form
      }
      // 判断条件是否存在 不存在删除条件
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      const res = await get('/article/pageQuery', temp)
      console.log(res, '获取响应')
      this.articleData = res.data.list
      this.total = res.data.total
    },
    // 获取所有文章分类
    async getCategory() {
      const res = await get('/category/findAll')
      // console.log(res,'获取响应');
      this.categories = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.el-link {
  font-size: 12px;
}
</style>
